<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:richfaces="http://richfaces.ajax4jsf.org/rich">

    <body>
        <ui:composition template="./main-template.xhtml">
            <ui:param name="titulo" value="Administración de clientes" />
            <ui:define name="body">
                <a4j:form>
                    <rich:panel  style="width:797px">
                        <table width="780px">
                            <tr align="left">
                                <td colspan="4" align="right">
                                    <a4j:commandLink action="#{CatalogBean.menu}" value="Regresar a la lista de clientes">
                                        <f:param name="menu" value="lista"/>
                                    </a4j:commandLink>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4" align="center" bgcolor="#AAAAFF">
                                    <b><h:outputLabel value="Administración de clientes" /></b>
                                </td>
                            </tr>
                            <tr align="left">
                                <td width="22%">
                                    Nombre: <br/> <h:inputText value="#{ClientBean.cliente.nombre}"/>
                                </td>
                                <td width="35%">
                                    Identificación:
                                    <br/>
                                    <h:selectOneMenu value="#{ClientBean.cliente.tipoDocumento}">
                                        <f:selectItem itemLabel="Seleccione" itemValue="Seleccione" />
                                        <f:selectItems value="#{ClientBean.tiposDocumentos}" />
                                    </h:selectOneMenu>
                                    <h:inputText  value="#{ClientBean.cliente.documento}"/>
                                </td>
                                <td width="22%">
                                    Telefono Residencia:
                                    <br/>
                                    <h:inputText  value="#{ClientBean.cliente.telefonoResidencia}"/>
                                </td>
                                <td width="21%">
                                    Telefono Celular:<br/> <h:inputText value="#{ClientBean.cliente.telefonoCelular}"/>
                                </td>
                            </tr>
                            <tr align="left">
                                <td>
                                    Direccion:<br/> <h:inputText value="#{ClientBean.cliente.direccion}"/>
                                </td>
                                <td>
                                    Pais:
                                    <br/>
                                    <h:selectOneMenu value="#{ClientBean.pais}" id="pais" >
                                        <f:selectItem itemLabel="Seleccione" itemValue="0"/>
                                        <f:selectItems  value="#{ClientBean.paises}" />
                                        <a4j:support event="onchange" reRender="departamento,ciudad"></a4j:support>
                                    </h:selectOneMenu>
                                </td>
                                <td>
                                    Departamento:
                                    <br/>
                                    <h:selectOneMenu value="#{ClientBean.departamento}" id="departamento">
                                        <f:selectItem itemLabel="Seleccione" itemValue="0"/>
                                        <f:selectItems value="#{ClientBean.departamentos}" />
                                        <a4j:support  event="onchange" reRender="ciudad" ></a4j:support>
                                    </h:selectOneMenu>
                                </td>
                                <td>
                                    Ciudad Residencia:
                                    <br/>
                                    <h:selectOneMenu value="#{ClientBean.ciudad}" id="ciudad">
                                        <f:selectItem  itemLabel="Seleccione" itemValue="0"/>
                                        <f:selectItems  value="#{ClientBean.ciudades}" />
                                    </h:selectOneMenu>
                                </td>
                            </tr>
                            <tr align="left">
                                <td colspan="2">
                                    Profesion:
                                    <br/>
                                    <h:inputText value="#{ClientBean.cliente.profesion}"/>
                                </td>
                                <td colspan="2">
                                    Email:
                                    <br/>
                                    <h:inputText value="#{ClientBean.cliente.email}"/>
                                </td>

                            </tr>
                        </table>

                    </rich:panel>
                    <table>
                        <tr>
                            <td><a4j:commandButton value="Guardar" action="#{ClientBean.saveLogin}" /></td>
                            <td>
                            </td>
                        </tr>
                    </table>


                </a4j:form>
            </ui:define>
        </ui:composition>
    </body>
</html>